const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    //配置入口,出口
    entry: './src/main.js', // webpack 入口
    output: { // 出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    //配置 plugins
    plugins: [
        //html 插件
        new HtmlWebpackPlugin({
            //指定要复制的 html 文件所在地
            //可以使用 相对路径
            //作用: 每次打包时 自动从该目录下复制 html 文件到 dist 里面
            template: './public/index.html'
        }),
    ],
    //
    module: {
        rules: [{
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/i,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                type: 'asset',
                generator: {
                    filename: 'fonts/[name].[hash:4][ext]'
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                type: 'asset/resource',
                // generator 就是定义打包输出的规则
                generator: {
                    filename: 'fonts/[name].[hash:4][ext]'
                }
            }
        ]
    }
};